<template>
  <div id="details" @click="delayScreenProtect">
    <!-- banner -->
    <Banner v-if="isShowBanner" @route2="bannerRoute" />
    <!-- nav -->
    <Nav />
    <!-- 中间路由 -->
    <div class="content">
      <!-- 缓存判断 -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <!-- 路由按钮组 -->
    <div class="route_btn_group">
      <div class="route_btns">
        <div class="flag" :style="updateLeft"></div>
        <div
          class="route"
          :style="{backgroundImage: 
            route.isActive? `url(${route.activeIcon})`: `url(${route.icon})`
          }"
          v-for="(route,index) in routeBtns"
          :key="index"
          @click="go2route(route)"
        ></div>
      </div>
      <div class="main_btn">
        <div class="goBack" @click="goBack"></div>
        <div class="goHome" @click="()=>{this.isShowBanner = true}"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Nav from "../components/nav";
import Banner from "../components/banner";
export default {
  props: {},
  data() {
    return {
      // 是否显示banner
      isShowBanner: true,
      // 路由按钮
      routeBtns: [
        {
          name: "Map",
          icon: require("../assets/images/details/navigation_floor.png"),
          activeIcon: require("../assets/images/details/navigation_floor_d.png"),
          isActive: false
        },
        {
          name: "Shopping",
          icon: require("../assets/images/details/navigation_shopping.png"),
          activeIcon: require("../assets/images/details/navigation_shopping_d.png"),
          isActive: false
        },
        {
          name: "Food",
          icon: require("../assets/images/details/navigation_dining.png"),
          activeIcon: require("../assets/images/details/navigation_dining_d.png"),
          isActive: false
        },
        {
          name: "Movie",
          icon: require("../assets/images/details/navigation_movie.png"),
          activeIcon: require("../assets/images/details/navigation_movie_d.png"),
          isActive: false
        },
        {
          name: "Active",
          icon: require("../assets/images/details/navigation_activity.png"),
          activeIcon: require("../assets/images/details/navigation_activity_d.png"),
          isActive: false
        },
        {
          name: "Vip",
          icon: require("../assets/images/details/navigation_vip.png"),
          activeIcon: require("../assets/images/details/navigation_vip_d.png"),
          isActive: false
        },
        {
          name: "Car",
          icon: require("../assets/images/details/navigation_car.png"),
          activeIcon: require("../assets/images/details/navigation_car_d.png"),
          isActive: false
        },
        {
          name: "More",
          icon: require("../assets/images/details/navigation_more.png"),
          activeIcon: require("../assets/images/details/navigation_more_d.png"),
          isActive: false
        }
      ],
      // 按钮宽度（此处动态获取实际宽度，因为是响应式的宽度）
      routeWidth: 0,
      // 路由按钮激活的索引
      isActiveIndex: 0
    };
  },
  computed: {
    ...mapState("home", {
      screenProtect_VNode: state => state.screenProtect_VNode
    }),
    // 给激活路由按钮赋值left
    updateLeft() {
      return {
        left: `${this.routeWidth * this.isActiveIndex}px`
      };
    },
    updateRouteName() {
      return this.$route.name;
    }
  },
  created() {
    if (this.$route.query.type) {
      this.updateRouteStyle(this.$route.query.type);
    }

    // 初始化直接加载地图子路由
    this.$router.push({ name: "Map" });
  },
  mounted() {
    // 拿到按钮宽度（此处动态获取实际宽度，因为是响应式的宽度）
    this.routeWidth =
      parseInt(
        window.getComputedStyle(document.querySelector(".route_btns")).width
      ) / this.routeBtns.length;
  },
  watch: {
    updateRouteName(newRoute) {
      // 更新路由按钮样式
      this.updateRouteStyle(newRoute);
    }
  },
  methods: {
    // 更新路由按钮样式
    updateRouteStyle(name) {
      this.routeBtns.forEach((item, index) => {
        item.isActive = false;
        if (item.name === name) {
          item.isActive = true;
          this.isActiveIndex = index;
        }
      });
    },
    // 回退
    goBack() {
      // 此处逻辑需完善二级/三级历史记录回退功能
      this.$router.go(-1);
    },
    // 跳转特定路由
    go2route(route) {
      if (route.isActive) {
        return;
      }
      this.updateRouteStyle(route.name);
      this.$router.push({ name: route.name });
    },
    // banner页跳转路由
    bannerRoute(type) {
      this.isShowBanner = false;
      this.$router.push({ name: type });
      this.updateRouteStyle(type);
    },
    // 有点击事件延迟屏保重新计算
    delayScreenProtect() {
      this.screenProtect_VNode.reLoadScreenProtector();
    }
  },
  components: { Nav, Banner }
};
</script>

<style lang='less'>
#details {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/images/screenProtect/bg.png") no-repeat center;
  background-size: cover;
  #nav {
    .weather {
      top: 0;
      transform: translateY(-100%);
    }
  }
  .content {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 3390px;
    height: 1908px;
    background-color: rgba(242, 226, 207, 0.6);
    border-radius: 415px 80px 0 0;
  }
  .route_btn_group {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    width: 3485px;
    height: 270px;
    display: flex;
    .route_btns {
      .flag {
        position: absolute;
        bottom: 0;
        width: 370px;
        height: 280px;
        background-image: linear-gradient(120deg, #ffd59b 0%, #a87e43 100%);
        box-shadow: 0px 3px 40px 0px #d7c6a6;
        border-radius: 130px 20px 0px 0px;
        transition: all 0.5s;
      }
      width: 3045px;
      height: 100%;
      background-color: #ffffff;
      box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.16);
      border-radius: 130px 40px 0px 0px;
      opacity: 0.9;
      display: flex;
      .route {
        flex: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
        z-index: 100;
        transition: all 0.3s;
      }
    }
    .main_btn {
      flex: 1;
      margin-left: 30px;
      background-color: #ffffff;
      box-shadow: 0px 3px 30px 0px #b09f80;
      border-radius: 40px 40px 0px 0px;
      opacity: 0.9;
      display: flex;
      div {
        flex: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 75%;
      }
      .goBack {
        background-image: url("../assets/images/details/navigation_back_d.png");
      }
      .goHome {
        background-image: url("../assets/images/details/navigation_home_d.png");
      }
    }
  }
}
</style>
